<template>
    <div class="Thing">
        <div class="Detail">
            <div class="detail_title">
                <div class="detail_title_left">
                    <span @click="goPage()">
                        <img src="../assets/images/Detai/triver_miniapp_bar_return_dark.png">
                    </span>
                    <span class="recommendList">推荐商品</span>
                </div>
            </div>
        </div>
        <div class="recommend">
            <Loader v-if="!itemList"></Loader>
            <div class="list" v-if="itemList">
                <div class="item" v-for="item in itemList.list">
                    <div v-if="item.goods != undefined" @click="toBuy('/buy', item.goods.goods_id)">
                        <img :src="item.goods.cover_img[0]">
                        <p class="">{{ item.goods.name }}</p>
                        <div class="recommend_meage">
                            <p><span v-for="tag in item.goods.tags">{{ tag }}</span></p>
                            <div class="recommend_meage_name">
                                <span class="price"><span style="font-size: 15px;">￥</span>{{ item.goods.price }}</span>
                                <span class="coupons_price" v-if="item.goods.coupons_price">￥{{ item.goods.coupons_price
                                }}</span>

                            </div>
                            <span class="pay">{{ item.goods.sales }}人付款</span>
                        </div>
                    </div>
                    <div v-else class="ad">
                        <p>{{ item.guide.name }}</p>

                        <p>{{ item.guide.title }}</p>
                        <p v-for="content  in item.guide.content" class="content">{{ content }}</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script  lang="ts">
import { getItem } from '@/api/itemList'
import { onMounted } from 'vue'
import { defineComponent, ref } from 'vue'
import { useRouter, } from "vue-router"
import { useRoute } from "vue-router"
import Loader from '../components/Loader.vue'
export default defineComponent({
    components: {
        Loader,
    },
    setup() {
        const toBuy = (path: string, goods_id: number) => {
            router.push({
                path,
                query: {
                    goods_id
                }
            })
        }
        let route: any = useRoute();
        let itemList = ref()
        const getItemFun: () => void = (): void => {
            getItem({ offset: 0, count: 10, third_cid: 0, second_cid: route.query.second_cid }).then((data: any) => {
                itemList.value = data.data
                console.log(itemList.value.list);
            })
        }
        let router: any = useRouter();
        const goPage = () => {
            router.back();
        }
        onMounted(() => {
            getItemFun()
        })
        return {
            itemList, goPage, toBuy
        }
    },
})

</script>

<style scoped lang="scss">
.detail_title {
    width: 100%;
    height: 48px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;

    .detail_title_left {
        display: flex;
        align-items: center;



        img {
            width: 25px;
            height: 30px;
            display: block;
            border-radius: 50%;
        }



    }
}

.content {
    background-color: #a09898;
}

.ad {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.price {
    font-size: 18px;
    color: #ef888b;
}

.pay {
    font-size: 13px;
    color: #898989;
}

.coupons_price {
    margin-left: 5px;
    text-decoration: line-through;
    font-size: 14px;
    color: #bebebe;

}

.recommend {
    background-color: #f5f5f5;
    padding: 10px 6px 50px;
    min-height: 83.8vh;
    position: relative;

    .loadingio-spinner-cube-fwf48mahvl {
        // margin: 0 auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto auto;
    }

    h3 {
        color: #898989;
        font-size: 15px;
        margin-bottom: 10px;
    }
}

.list {
    column-count: 2;
    column-gap: 10px;
    column-width: 100%;

    .item {
        width: 100%;
        break-inside: avoid;
        margin-top: 5px;
        background: #fff;
        border-radius: 4px;
        overflow: hidden;

        img {
            width: 100%;
            height: auto;
            display: block;
        }

        p {
            margin-top: 5px;
            padding: 0px 5px;
            word-wrap: break-word;
            font-size: 14px;

            span {
                padding: 1px;
                background-color: #f2f4f3;
                display: inline-block;
                color: #c6c8c7;
            }
        }
    }
}


.recommend_meage {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding-left: 5px;
    padding-bottom: 15px;

    .recommend_meage_left {
        display: flex;
        flex: 1;

        img {
            width: 22px;
            height: 22px;
            display: block;
            border-radius: 50%;
            margin-right: 5px;
        }

        .recommend_meage_name {
            font-size: 12px;
            color: #444;
            display: flex;

        }
    }

    .recommend_meage_right {
        position: relative;

        img {
            margin-right: 30px;
            width: 22px;
            height: 22px;
            display: block;
            position: absolute;
            top: 1px;
            right: 0;
        }

        p {
            font-size: 14px;
            color: #444;
            font-weight: normal;
        }
    }
}
</style>